<template>
  <div class="room-list" style="height: 100%; overflow: hidden auto">
    <a-row v-if="datalist && datalist.length" type="flex" :gutter="15">
      <a-col
        v-for="(item, index) of datalist"
        :key="index"
        :span="colSpan"
        :data-suffix="item.room_num"
        class="room-item-wrap"
        @click="details(item)"
      >
        <corner-border-box style="cursor: pointer">
          <a-row type="flex">
            <a-col :span="12" style="border-right: 1px solid rgba(255, 255, 255, 0.15); margin: 5px 0">
              <p class="bold-text">{{ item.room_num }}</p>
              <p style="color: #aaa">房号</p>
            </a-col>
            <a-col :span="12" style="margin: 5px 0; color: #fff">
              <p>
                <span class="bold-text">{{ item.people_num }}</span
                >/<span style="color: #e64c1c">{{ item.people_num_max }}</span>
                <span>人</span>
              </p>
              <p style="color: #aaa">居住数</p>
            </a-col>
          </a-row>
        </corner-border-box>
      </a-col>
    </a-row>
    <empty v-else />
  </div>
</template>

<script>
import Empty from '@gis/lib/components/Empty/index.vue';
import CornerBorderBox from '../../components/corner-border-box.vue';
import { homestayRoomList } from '@gis/lib/api';
import { handleCommonRes } from '@gis/lib/utils/resolver.js';
import { openHomestayDetailsDialog } from './opt.js';

export default {
  name: 'room-list',
  components: { CornerBorderBox, Empty },
  props: {
    id: { type: String, default: '' },
    colSpan: { type: Number, default: 8 },
  },
  data() {
    return {
      datalist: [],
    };
  },
  watch: {
    id: {
      immediate: true,
      handler(id) {
        if (id) {
          this.getDataAsync();
        } else {
          this.datalist = [];
        }
      },
    },
  },
  methods: {
    async getDataAsync() {
      const params = { cell_id: this.id };
      this.datalist = await handleCommonRes(homestayRoomList(params));
    },
    details(data) {
      openHomestayDetailsDialog(data);
    },
  },
};
</script>

<style scoped lang="less">
.room-list {
  line-height: 1.5;
  p {
    line-height: inherit;
    margin: 0;
  }
  .room-item-wrap {
    margin-bottom: 11px;
    text-align: center;
    .bold-text {
      font-size: 24px;
      font-weight: bold;
      color: #e64c1c;
    }
    .room-item {
      border: 2px solid rgba(29, 255, 204, 0.3);
      border-radius: 5px;
      & > p {
        padding: 5px;
        font-size: 18px;
        font-weight: bold;
        color: #ffffff;
        &:first-child {
          border-bottom: 2px solid rgba(29, 255, 204, 0.3);
          color: #1dffcc;
        }
      }
    }
  }
}
</style>
